<!-- components/AccountSettings.vue -->
<template>
  <div class="account-settings">
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="个人资料" name="profile">
        <ProfileSettings :user-info="props.userInfo" />
      </el-tab-pane>

      <el-tab-pane label="绑定手机" name="phone">
        <PhoneSettings :phone="props.userInfo.phone" />
      </el-tab-pane>

      <el-tab-pane label="绑定邮箱" name="email">
        <EmailSettings :email="props.userInfo.email" />
      </el-tab-pane>

      <el-tab-pane label="修改密码" name="password">
        <PasswordSettings />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ProfileSettings from './ProfileSettings.vue'
import PhoneSettings from './PhoneSettings.vue'
import EmailSettings from './EmailSettings.vue'
import PasswordSettings from './PasswordSettings.vue'

interface UserInfo {
  name: string
  phone: string
  email: string
  avatar?: string | null
  // 其他通用字段
}

const props = defineProps<{
  userInfo: UserInfo
}>()

const activeTab = ref('profile')
</script>

<style scoped>
.account-settings {
  min-height: 400px;
}

:deep(.el-tabs__header) {
  margin-bottom: 20px;
}
</style>
